<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创意工作室 - 项目展示</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <nav class="navbar">
        <div class="container">
            <a href="index.html" class="logo">创意工作室</a>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于</a></li>
                <li><a href="projects.html" class="active">项目</a></li>
                <li><a href="contact.html">联系</a></li>
            </ul>
        </div>
    </nav>

    <section class="projects-hero">
        <div class="container">
            <h1>项目展示</h1>
            <p>探索我们的创意作品</p>
        </div>
    </section>

    <section class="projects-filter">
        <div class="container">
            <div class="filter-buttons">
                <button class="filter-btn active" data-filter="all">全部</button>
                <button class="filter-btn" data-filter="design">设计</button>
                <button class="filter-btn" data-filter="development">开发</button>
                <button class="filter-btn" data-filter="branding">品牌</button>
            </div>
        </div>
    </section>

    <section class="projects-grid-section">
        <div class="container">
            <div class="projects-grid" id="projects-container"></div>
        </div>
    </section>

    <section class="project-details" id="project-details">
        <div class="container">
            <div class="project-detail-content">
                <div class="project-images">
                    <img src="" alt="" id="detail-image">
                    <div class="project-thumbnails" id="project-thumbnails"></div>
                </div>
                <div class="project-info">
                    <h2 id="detail-title"></h2>
                    <p id="detail-description"></p>
                    <div class="project-meta">
                        <div class="meta-item">
                            <i class="fas fa-calendar"></i>
                            <span id="detail-date"></span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-tag"></i>
                            <span id="detail-category"></span>
                        </div>
                    </div>
                    <div class="project-features">
                        <h3>项目特点</h3>
                        <ul id="detail-features"></ul>
                    </div>
                    <a href="contact.html" class="cta-button">咨询项目</a>
                </div>
            </div>
        </div>
    </section>

    <section class="cta-section">
        <div class="container">
            <h2>有创意项目需要实现？</h2>
            <p>让我们帮您将想法变为现实</p>
            <a href="contact.html" class="cta-button">开始项目</a>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>创意工作室</h3>
                    <p>打造独特的数字体验，创造无限可能</p>
                </div>
                <div class="footer-section">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="about.html">关于</a></li>
                        <li><a href="projects.html">项目</a></li>
                        <li><a href="contact.html">联系</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>联系我们</h3>
                    <p>邮箱: contact@creativestudio.com</p>
                    <p>电话: +86 123 4567 8900</p>
                </div>
            </div>
            <p class="copyright">&copy; 2024 创意工作室. All rights reserved.</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html> 